<template>
  <div>
    <el-card shadow="never" style="margin-bottom: 10px" v-if="isShowAction">
      <el-form ref="form" :model="info" label-width="90px" :rules="rules">
        <div class="el-dialog-div form-scrollbar">
          <div style="display: flex">
            <el-form-item label="" prop="type">
              <el-select
                v-model="info.type"
                class="filter-left"
                placeholder="请选择类型"
              >
                <el-option v-for="item in options" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="nextAt">
              <div class="block">
                <el-date-picker
                  v-model="info.nextAt"
                  type="datetime"
                  placeholder="选择下次联系时间">
                </el-date-picker>
              </div>
            </el-form-item>
            <el-button-group style="margin-top:3px;position: absolute;right: 21px;">
              <el-button type="success" size="mini" icon="el-icon-check" @click="editFollow()">添加</el-button>
              <el-button type="primary" size="mini" icon="el-icon-refresh-left" @click="reset()">重置</el-button>
            </el-button-group>
          </div>
          <el-form-item label="" prop="content">
            <el-input type="textarea" v-model="info.content" :rows="6"></el-input>
          </el-form-item>
        </div>
      </el-form>
    </el-card>
    <el-scrollbar
      ref="myScrollbar"
      :wrap-class="{wrapClass: true}"
      class="form-scrollbar-timeline scrollbar-back-top"
      :style="isShowAction ? {'height':'calc(100vh - 575px)'} : {'height':'calc(100vh - 325px)'}"
      v-loading="infoLoading"
    >
      <el-timeline style="padding-inline-start: unset;margin: 5px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          type="primary"
          icon="el-icon-more"
          :timestamp="activity.createdAt">
          <el-card shadow="never">
            <div style="position: absolute;right: 20px;">
              <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="beforeHandleCommand(activity.id,'edit')">编辑</el-dropdown-item>
                  <el-dropdown-item :command="beforeHandleCommand(activity.id,'delete')">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <p><span class="timeline-label">跟进方式</span>：{{getTypeDesc(activity.type)}}</p>
            <p><span class="timeline-label">跟进记录：</span>{{activity.content}}</p>
            <p v-if="activity.nextAt"><span class="timeline-label">下次联系：</span>{{activity.nextAt}}</p>
            <p><span class="timeline-label">跟进人：</span>{{activity.user.trueName}}</p>
            <p><span class="timeline-label">更新于：</span>{{activity.updatedAt}}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>

    <el-dialog
      title="编辑跟进记录"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body
      width="500px"
    >
      <el-form ref="form" v-loading="editLoading" :model="rowInfo" :rules="rules" label-width="90px">
        <div class="el-dialog-div form-scrollbar" style="height: 220px">
          <div style="display: flex">
            <el-form-item label="" prop="type">
              <el-select
                v-model="rowInfo.type"
                class="filter-left"
                placeholder="请选择类型"
              >
                <el-option v-for="item in options" :label="item.label" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="" prop="nextAt">
              <div class="block">
                <el-date-picker
                  v-model="rowInfo.nextAt"
                  type="datetime"
                  placeholder="选择下次联系时间">
                </el-date-picker>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="" prop="content">
            <el-input type="textarea" v-model="rowInfo.content" :rows="6"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-row>
          <el-col :span="12" class="btnEdit">
            <el-button :disabled="editLoading" type="primary" @click="editFollow()">确 定</el-button>
          </el-col>
          <el-col :span="12" class="btnEdit">
            <el-button @click="dialogVisible = false">取 消</el-button>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createFollow, updateFollow, getList, deleteFollow,getFollow} from "@/api/customer/follow";

export default {
  name: "follow",
  props: {
    // show: {
    //   type: Boolean,
    //   default: false
    // },
    customerId: '',
    closeAction: '',
    refresh: '',
    isShowAction: true,
  },
  data() {
    return {
      infoLoading: true,
      editLoading: true,
      dialogVisible: false,
      id: '',
      info: {
        type: '',
        nextAt: '',
        content: '',
      },
      rowInfo:{},
      options: [
        {label: '打电话', value: 1},
        {label: '发邮件', value: 2},
        {label: '发短信', value: 3},
        {label: '见面拜访', value: 4},
      ],
      activities: [],
      rules: {
        //element form表单元素验证
        label: [{required: true, message: '请选择类型', trigger: 'blur'}],
        content: [{required: true, message: '请填写记录', trigger: 'blur'}],
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    reset() {
      this.info = {
        type: '',
        nextAt: '',
        content: '',

      }
    },
    getTypeDesc(type) {
      var arr = [
        '',
        '打电话',
        '发邮件',
        '发短信',
        '见面拜访'
      ];
      return arr[type];
    },
    async getList() {
      this.id = '';
      await getList(this.customerId).then((res) => {
        this.activities = res.data
        setTimeout(() => {
          this.infoLoading = false
        }, 0.5 * 1000)
        setTimeout(() => {
          this.timelineHeight = {}
        }, 1000)
      }).catch(() => {
        setTimeout(() => {
          this.infoLoading = false
        }, 0.5 * 1000)
      })
    },
    editFollow() {
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          this.infoLoading = true
          let data = this.info
          data.customerId = this.customerId
          if (this.id != '') {
            data = this.rowInfo
            await updateFollow(this.id, data).then((res) => {
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.dialogVisible = false
              this.reset();
              this.getList()
              this.$emit('refresh')
              setTimeout(() => {
                this.infoLoading = false
              }, 0.5 * 1000)
            }).catch(() => {
              setTimeout(() => {
                this.infoLoading = false
              }, 0.5 * 1000)
            })
          } else {
            await createFollow(data).then((res) => {
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.reset();
              this.getList()
              this.$emit('refresh')
              setTimeout(() => {
                this.infoLoading = false
              }, 0.5 * 1000)
            }).catch(() => {
              setTimeout(() => {
                this.infoLoading = false
              }, 0.5 * 1000)
            })
          }
        }
      })
    },
    beforeHandleCommand(scope, command) {
      return {
        'scope': scope,
        'command': command
      }
    },
    handleCommand(command) {
      switch (command.command) {
        case 'edit':
          this.editRow(command.scope)
          break;
        case 'delete':
          this.deleteRow(command.scope)
          break;
      }
    },
    async editRow(id){
      await getFollow(id).then((res) => {
        this.rowInfo = res.data
        this.id = res.data.id
        setTimeout(() => {
          this.editLoading = false
          this.dialogVisible = true
        }, 0.5 * 1000)
      })
    },
    deleteRow(id) {
      this.$confirm('确认要删除吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        this.infoLoading = true
        await deleteFollow(id).then((res) => {
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          })
          this.getList()
        })
      }).catch(() => {
        setTimeout(() => {
          this.infoLoading = false
        }, 0.5 * 1000)
      })
    }
  }
}
</script>

<style scoped>
.form-scrollbar /deep/ .el-form-item__content {
  margin-left: unset !important;
}

.form-scrollbar {
  height: 200px;
}

.form-scrollbar-timeline {
  /*height: calc(100vh - 575px)*/
}

.timeline-label {
  font-weight: bold;
}

.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
/deep/ .el-card{
  border:unset!important;
}
</style>
